<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Iframe Title</title>
    <script type="text/javascript" src="../d3.v4.min.js"></script>
  <script type="text/javascript" src="Texture/textures.js"></script>
<meta charset=utf-8 /><style type="text/css">
<!--
.slider-wrapper {
  display: inline-block;
  width: 20px;
  height: 120px;
  padding: 0;
}
.slider-wrapper input {
  width: 120px;
  height: 20px;
  margin: 0;
  transform-origin: 60px 60px;
  transform: rotate(-90deg);
}

-->
</style>
</head>
<body onload=sendSize() style='padding:5px;border-radius:10px;border:2px solid lightblue;background-color:transparent;margin:0;font-family:arial'>
<div id=containerDiv>

<table cellpadding=0 cellsppacing=0  style='width:330px;background-color:gainsboro'>
<tr>
<td>
<table cellpadding=0 cellsppacing=0 style='width:100%;background-color:gainsboro'>
<tr ><td id=drawTextureTopTable style='width:90%;background-color:linen' align=center><span id=drawTextureEditSpan>Add Textures</span></td><td align=right> <button onClick=parent.closeDrawTexture()  >X</button></td></tr>
</table>
</td>

</tr>

<tr style=background-color:linen>
<td align=center ><div style="width:360px;text-align:justify">

<table border=1 style=border-collapse:collapse>


<tr align=center>
<td>Circles:<input type="radio" name=textureRadio id=circlePatternRadio onClick=getMyTexture() /></td>
<td>Lines:<input type="radio" name=textureRadio id=linePatternRadio  onClick=getMyTexture()  /></td>
<td>Paths:<input type="radio" name=textureRadio id=pathPatternRadio  onClick=getMyTexture()  /></td>
</tr>

<tr>
<td style=width:80px; align=center >
Radius: <br>
<div class="slider-wrapper">
  <input  onmousedown="CircleRadius=true" onmouseup="CircleRadius=false" onmousemove="circleRadius(this.value)" type="range" min="1" max="20" value="10" step=".5">
</div><br>
<input onkeyup=getMyTexture() type="text" id=circleRadiusValue style=width:30px value=10 />

<br>
Fill <span id=fillBg>Color</span>:<select name="" id="fillColorSelect" onChange=fillColorSelected();getMyTexture()></select>
</td>

<td>
<input id=lineDiagonalRadio onClick=hatch0Select.disabled=true;hatch1Select.disabled=true;getMyTexture()  checked type="radio" name=lineTypeRadio />:Diagonal
<br><input id=lineVerticalRadio  onClick=hatch0Select.disabled=true;hatch1Select.disabled=true;getMyTexture()  type="radio" name=lineTypeRadio />:Vertical
<br><input id=lineHorizontalRadio  onClick=hatch0Select.disabled=true;hatch1Select.disabled=true;getMyTexture()  type="radio" name=lineTypeRadio />:Horizontal

<br><input id=line1Radio  onClick=hatch0Select.disabled=true;hatch1Select.disabled=true;getMyTexture()  type="radio" name=lineTypeRadio />:Orientation 1/8
<br><input id=line2Radio  onClick=hatch0Select.disabled=true;hatch1Select.disabled=true;getMyTexture()  type="radio" name=lineTypeRadio />:Orientation 2/8
<br><input id=line3Radio  onClick=hatch0Select.disabled=true;hatch1Select.disabled=true;getMyTexture()  type="radio" name=lineTypeRadio />:Orientation 3/8
<br><input id=lineCrossHatchRadio  onClick=hatch0Select.disabled=false;hatch1Select.disabled=false;getMyTexture()  type="radio" name=lineTypeRadio />:Cross Hatch
<br><select onChange=getMyTexture()  disabled name="" id="hatch0Select">
<option value="diagonal" >Diagonal</option>
<option value="vertical" selected >Vertical</option>
<option value="horizontal" >Horizontal</option>
<option value="1/8">Orientation 1/8</option>
<option value="2/8">Orientation 2/8</option>
<option value="3/8">Orientation 3/8</option>

</select>
<br><select onChange=getMyTexture()  disabled name="" id="hatch1Select">
<option value="diagonal" >Diagonal</option>
<option value="vertical" >Vertical</option>
<option value="horizontal" selected >Horizontal</option>
<option value="1/8">Orientation 1/8</option>
<option value="2/8">Orientation 2/8</option>
<option value="3/8">Orientation 3/8</option>

</select>

</td>


<td>

<input id=pathSquaresRadio checked onClick=getMyTexture()  type="radio" name=pathTypeRadio />:Squares
<br><input id=pathNylonRadio  onClick=getMyTexture()  type="radio" name=pathTypeRadio />:Nylon
<br><input id=pathWavesRadio  onClick=getMyTexture()  type="radio" name=pathTypeRadio />:Waves
<br><input id=pathWovenRadio  onClick=getMyTexture()  type="radio" name=pathTypeRadio />:Woven
<br><input id=pathCrossesRadio  onClick=getMyTexture()  type="radio" name=pathTypeRadio />:Crosses
<br><input id=pathCapsRadio  onClick=getMyTexture()  type="radio" name=pathTypeRadio />:Caps
<br><input id=pathHexagonsRadio  onClick=getMyTexture()  type="radio" name=pathTypeRadio />:Hexagons

</td>

</tr>

<tr align=center><td colspan=3>

Stroke Width: <input  onmousedown="StrokeWidth=true" onmouseup="StrokeWidth=false" onmousemove="strokeWidthTexture(this.value)" id=strokeWidthRangeValue style=width:150px type="range" value=1 min=".1" step=.1 max="3"> <input style=width:40px id=strokeWidthValue type="text" value=1 />
<br>
Stroke <span id=strokeBg>Color</span>:<select name="" id="strokeColorSelect" onChange=strokeColorSelected();getMyTexture()></select>


</td></tr>
<tr align=center><td colspan=3>
Size: <input  onmousedown="SizeTexture=true" onmouseup="SizeTexture=false" onmousemove="sizeTexture(this.value)" id=sizeRangeValue style=width:200px type="range" value=20 min="1" step=.5 max="30"> <input style=width:40px id=sizeValue type="text" value=20 />

</td></tr>
<tr align=center>
<td colspan=3 align=center>

<i>Apply to</i> <b style=color:blue>fill:</b><input  onClick='myRect.setAttribute("stroke","blue");AddTo="fill"' type="radio" name='addToRadio' checked />  <b style=color:aqua>stroke:</b><input onClick='myRect.setAttribute("stroke","aqua");AddTo="stroke"'  type="radio" name='addToRadio' />
</td>
</tr>

</table>
<center>
<svg width=150 height=75 id=textureSVG >
<defs id=defsPattern />
<rect id=myRect fill=gainsboro stroke=blue stroke-width=3 width=150 height=75 /></svg>
<button style='border:2px solid violet' disabled id=saveTextureButton onClick=parent.saveTextureButtonClicked()>Save</button>
</center>
</div>
<div style=font-size:80%;text-align:justify >
<i>After a texture/pattern is saved, click on an element to add the pattern to either fill or stroke.</i>
</div>
<div id=savedTextureDiv style='text-align:left;padding:5px;border:4px violet inset;visibility:hidden;background:linen;width:360px;height:80px;overflow-y:hidden;'>
<table id=savedTextureTable ><tr ></tr></table>


</div>


</td>
</tr>




</table>
</div>


</body>
<script>
 var SizeTexture=false
function sizeTexture(value)
{
   if(SizeTexture)
   {
   sizeValue.value=value
    getMyTexture()
   }

}
 var CircleRadius=false
function circleRadius(value)
{
   if(CircleRadius)
   {
   circleRadiusValue.value=value
    getMyTexture()
   }

}
 var StrokeWidth=false
function strokeWidthTexture(value)
{
   if(StrokeWidth)
   {
   strokeWidthValue.value=value
    getMyTexture()
   }

}


//---on any change of selection(s)---
var MyTexture
var AddTexture
var DefsPattern
var AddTo="fill"
function getMyTexture()
{
   if(linePatternRadio.checked==true||circlePatternRadio.checked==true||pathPatternRadio.checked==true)
   {
   //---remove previous defs---
   if(textureSVG.lastChild.nodeName=="defs")
   textureSVG.removeChild(textureSVG.lastChild)

   var fillColor=fillColorSelect.options[fillColorSelect.selectedIndex].value
   var strokeColor=strokeColorSelect.options[strokeColorSelect.selectedIndex].value
   var strokeWidth=strokeWidthValue.value
   var size=+sizeValue.value


   if(linePatternRadio.checked==true)
   {
         if(lineDiagonalRadio.checked)orientation="diagonal"
         if(lineVerticalRadio.checked)orientation="vertical"
         if(lineHorizontalRadio.checked)orientation="horizontal"
         if(line1Radio.checked)orientation="1/8"
         if(line2Radio.checked)orientation="2/8"
         if(line3Radio.checked)orientation="3/8"

         MyTexture=textures.lines()

        if(lineCrossHatchRadio.checked)
        {
            var orientation0=hatch0Select.options[hatch0Select.selectedIndex].value
            var orientation1=hatch1Select.options[hatch1Select.selectedIndex].value

            MyTexture.orientation(orientation0,orientation1)
        }
        else
        MyTexture.orientation(orientation)
   }
   else if(circlePatternRadio.checked==true)
   {

        MyTexture=textures.circles()

        MyTexture.fill(fillColor)
        var r=+circleRadiusValue.value

        MyTexture.radius(r)
   }
   else if(pathPatternRadio.checked==true)
   {
       if(pathSquaresRadio.checked)d="squares"
       if(pathNylonRadio.checked)d="nylon"
       if(pathWavesRadio.checked)d="waves"
       if(pathWovenRadio.checked)d="woven"
       if(pathCrossesRadio.checked)d="crosses"
       if(pathCapsRadio.checked)d="caps"
       if(pathHexagonsRadio.checked)d="hexagons"

       MyTexture=textures.paths()
        .d(d)
   }

   MyTexture.size(size)
  .stroke(strokeColor)
  .strokeWidth(strokeWidth)


    var svg=d3.select("#textureSVG")
    svg.call(MyTexture);
    myRect.setAttribute("fill",MyTexture.url())
    //---parent---
    AddTexture=MyTexture.url()
    DefsPattern=textureSVG.lastChild

    saveTextureButton.disabled=false
  }
  //showSourceSVG()
}
</script>
<script>

function fillColorSelected()
{
   var clr=fillColorSelect.options[fillColorSelect.selectedIndex].value
	fillBg.style.backgroundColor=clr

}
function strokeWidthSelected()
{


}
function strokeColorSelected()
{
     var clr=strokeColorSelect.options[strokeColorSelect.selectedIndex].value
	strokeBg.style.backgroundColor=clr

}
function writeTextureColorSelection()
{
   var DrawColors=clrArray
	for(var k=0;k<DrawColors.length;k++)
	{
		var name=DrawColors[k][0]
		var myColor=DrawColors[k][1]

		var option=document.createElement("OPTION")
		option.style.backgroundColor=myColor
		option.value=myColor
		option.title=name+" "+myColor
                        if(parent.hexString.indexOf(myColor)!=-1)
        option.style.color="white"

		option.text=k
        strokeColorSelect.appendChild(option)




		var option=document.createElement("OPTION")
		option.style.backgroundColor=myColor
		option.value=myColor
		option.title=name+" "+myColor
                         if(parent.hexString.indexOf(myColor)!=-1)
        option.style.color="white"

		option.text=k
       fillColorSelect.appendChild(option)



	}
	strokeColorSelect.selectedIndex=353
	var clr=strokeColorSelect.options[strokeColorSelect.selectedIndex].value
	strokeBg.style.backgroundColor=clr
}

	var clrArray=parent.clrArray




function sendSize()
{

  writeTextureColorSelection()
          if(parent.SchematicTextureArray.length!=0)
         {
            setTimeout(parent.buildTextureTable,900)

        }

   var width=containerDiv.scrollWidth+15
   var height=containerDiv.scrollHeight+30

   parent.sizeFrame('addElemTexture',width,height)

       parent.startTextureDraw()

}


</script>
</html>